<template>
  <div>
    <el-row></el-row>
    <el-row>
      <el-input
        v-model="notice.noticeTitle"
        style="margin: 10px 0px;font-size: 18px;"
        placeholder="请输入标题"></el-input>
    </el-row>
    <el-row style="height: calc(100vh - 140px)">
      <mavon-editor
        v-model="notice.noticeContent"
        style="height: 100%;"
        ref=md
        @imgAdd="$imgAdd"
        @save="save"
        fontSize="16px">
        <button type="button" class="op-icon el-icon-document" :title="'摘要/封面'" slot="left-toolbar-after"
                @click="dialogVisible = true"></button>
      </mavon-editor>
      <el-dialog
        :visible.sync="dialogVisible"
        width="30%">
        <el-divider content-position="left">摘要</el-divider>
        <el-input
          type="textarea"
          v-model="notice.noticeAbstract"
          rows="6"
          maxlength="255"
          show-word-limit></el-input>
        <el-divider content-position="left">封面</el-divider>
        <div style="margin-top: 20px">
          <el-input v-model="notice.noticeCover" autocomplete="off" placeholder="图片 URL"></el-input>
          <img-upload @onUpload="uploadImg" ref="imgUpload" style="margin-top: 5px"></img-upload>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import ImgUpload from './ImgUpload'
import api from '../../apis/common/file'
import {Message} from 'element-ui'
import notice from '../../apis/admin/notice'

export default {
  name: 'Editor',
  props: {},
  components: {ImgUpload},
  data () {
    return {
      dialogVisible: false,
      url: '',
      notice: {
        noticeTitle: '',
        noticeCover: '',
        noticeAbstract: '',
        noticeContent: '',
        star: 0
      }
    }
  },
  computed: {
  },
  mounted () {
    // 接收路由对象传的参数
    this.typeId = this.$route.params.typeId
    // this.notice = this.$route.params.notice
  },
  methods: {
    async $imgAdd (pos, $file) {
      const formdata = new FormData()
      formdata.append('image', $file)
      const result = await api.uploadImg(formdata)
      this.$refs.md.$img2Url(pos, result.data)
      // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
      /**
         * $vm 指为mavonEditor实例，可以通过如下两种方式获取
         * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
         * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
         */
    },
    save (value, render) {
      // value 是 md，render 是 html
      this.$confirm('是否保存并发布文章?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (this.noNull()) {
          this.notice.noticeAbstract = value
          this.notice.contentHtml = render

          console.log('@@@@@@@@@')
          console.log(this.notice.noticeTitle)
          console.log(this.typeId)
          console.log('@@@@@@@@@')
          const resultArticle = await notice.insertNotice(this.notice, this.typeId)

          console.log(this.notice, this.typeId)
          if (resultArticle && resultArticle.code === 200) {
            Message.success('发布成功')
            await this.$router.push('/share/article')
          } else {
            Message.error('发布失败')
          }
        }
      }
      ).catch((reason) => {
        console.log(reason)
        console.log(this.notice)
        Message.info('失败')
      })
    },
    uploadImg (url) {
      // 更改对象数组的内部的对象不会触发vue对dom的监听，无法通过双向绑定实时修改数据，需要通过$set方法触发
      // Vue.nextTick(callback) 基于更新后的 DOM 状态来做点什么
      this.$set(this.notice, 'noticeCover', url)
    },
    noNull () {
      if (!this.notice.noticeTitle) {
        Message.error('请填写标题！')
        return false
      }
      return true
    }
  }
}
</script>

<style scoped>
</style>
